<template>
  <mu-container class="pos-r">
    <mu-row class="padt10">
      <mu-paper :z-depth="1" style="width: 100%" class="round5 pad5">
        <mu-flex align-items="center">
          <mu-flex>
            <mu-button icon @click="$goback()">
              <mu-icon value="arrow_back"></mu-icon>
            </mu-button>
          </mu-flex>
          <mu-flex fill><h3>{{title}}</h3></mu-flex>
          <mu-flex>
            <div class="padr10" v-show="openEdit">
              <mu-button small fab color="primary" @click="submit()">
                <mu-icon value="save"></mu-icon>
              </mu-button>
            </div>
          </mu-flex>
        </mu-flex>
      </mu-paper>
    </mu-row>
    <mu-row class="padt10" v-show="openEdit">
      <mu-paper style="width: 100%" :z-depth="0" class="tar">
        <mu-button flat small color="primary" round @click="changeId(prev)" v-if="$com.isbool(prev)">
          <mu-icon value="arrow_back"></mu-icon>
          上一条
        </mu-button>
        <mu-button flat small color="primary" round @click="changeId(next)" v-if="$com.isbool(next)">
          <mu-icon value="arrow_forward"></mu-icon>
          下一条
        </mu-button>
      </mu-paper>
    </mu-row>
    <mu-row class="padt10 pos-r" v-loading="loading">
      <mu-paper class="pad30" style="width: 100%" :z-depth="1">
        <!--        表单-->
        <formCreator ref="form" :form.sync="form" :items.sync="items" :openEdit="openEdit"
                     :labelPosition="labelPosition" v-if="reload"></formCreator>
        <!--        表单-->
        <mu-row v-show="openEdit">
          <mu-button color="primary" @click="submit()">
            <mu-icon left value="save"></mu-icon>
            <span>提交保存</span>
          </mu-button>
        </mu-row>
      </mu-paper>
    </mu-row>
  </mu-container>

</template>

<script>
  import api from '@/assets/js/api'
  import com from '@/assets/js/com'
  import formCreator from '@/components/FormCreator/Creator/Creator'

  export default {
    name: 'auto',
    components: {formCreator},
    data () {
      return {
        entityName: '',
        id: undefined,
        form: {},
        items: {},
        loading: true,
        reload: true,
        openEdit: true,
        title: '',
        labelPosition: 'left',
        next: 0,
        prev: 0
      }
    },
    created () {
    },
    mounted () {
      this.id = this.$route.query.id
      this.getData()
    },
    methods: {
      getData () {
        let _this = this
        this.entityName = this.$route.query.en
        let url = '/admin/' + this.entityName + '/form'
        let id = this.id
        let isView = this.$route.query.openEdit
        this.loading = true
        api.get(url, {id, openEdit: isView}, function (res) {
          _this.loading = false
          _this.form = res.d.show.entity
          _this.items = res.d.show.form
          _this.title = res.d.title
          _this.labelPosition = res.d.show.labelPosition
          _this.openEdit = res.d.show.openEdit
          _this.next = res.d.next
          _this.prev = res.d.prev
          _this.reload = true
        })
      },
      submit () {
        let _this = this
        console.log(this.$refs.form.$refs.form)
        this.$refs.form.$refs.form.validate().then((result) => {
          console.log('form valid: ', result)
          if (!result) {
            _this.$toast.error('请检查表单是否完整')
          } else {
            this.loading = true

            _this.form.breakOrder = '/api_/machine_breaks/' + _this.$route.query.breakOrder

            api.post('/admin/' + this.entityName + '/submit', this.form, function (res) {
              _this.loading = false
              if (res.s * 1 === 1) {
                // _this.entityName = _this.entityName.replace(_this.entityName[0],_this.entityName[0].toUpperCase())
                if (res.d === '') {
                  _this.$goto('/admin/list/' + _this.entityName + 'List')
                } else {
                  _this.$goto(res.d)
                }
              }
            })
          }
        })
      },
      changeId (id) {
        this.reload = false
        this.id = id
        this.getData()
        // this.$gointo('/admin/edit/auto?id=' + id + '&en=' + this.entityName)
      }
    }
  }
</script>

<style scoped>

</style>
